<template>

	<div style="width:100%;">
		<img src="./img/1.jpg" style="width: 100%;height: 100%;"/>
		<!-- <status-indicator active pulse></status-indicator> -->
		<div :style="`backgroundColor:${color}`" class="status"></div>
		<div :style="`backgroundColor:${color1}`" class="status"></div>
		<div :style="`backgroundColor:${color2}`" class="status"></div>
		<div :style="`backgroundColor:${color3}`" class="status"></div>
		<div :style="`backgroundColor:${color4}`" class="status"></div>
		<div :style="`backgroundColor:${color5}`" class="status"></div>
		<div :style="`backgroundColor:${color6}`" class="status"></div>
		<div :style="`backgroundColor:${color7}`" class="status"></div>
		<div :style="`backgroundColor:${color8}`" class="status"></div>
		<div :style="`backgroundColor:${color9}`" class="status"></div>
		<div :style="`backgroundColor:${color10}`" class="status"></div>
		<div :style="`backgroundColor:${color11}`" class="status"></div>
	</div>
</template>

<script>
	import Axios from 'axios'
	export default {
		name: 'RankingBoard',
		data() {
			return {
				color:'red',
				color1:'red',
				color2:'red',
				color3:'green',
				color4:'red',
				color5:'red',
				color6:'red',
				color7:'red',
				color8:'red',
				color9:'red',
				color10:'red',
				color11:'red',
			}
		},
		methods: {
			UpdateData() {
				const {randomExtend} = this;
				Axios.get('http://172.21.148.127:5000/api/TWoring/GetDeviceStatus').then(
					response => {
						let status = response.data.split(',');
						for(var i=0;i<status.length;i++)
						{
							switch(i)
							{
								case 0:
									this.color = status[i] == "0"?"green":"red";
									break;
								case 1:
									this.color1 = status[i] == "0"?"green":"red";
									break;
								case 2:
									this.color2 = status[i] == "0"?"green":"red";
									break;
								case 3:
									this.color3 = status[i] == "0"?"green":"red";
									break;
								case 4:
									this.color4 = status[i] == "0"?"green":"red";
									break;
								case 5:
									this.color5 = status[i] == "0"?"green":"red";
									break;
								case 6:
									this.color6 = status[i] == "0"?"green":"red";
									break;
								case 7:
									this.color7 = status[i] == "0"?"green":"red";
									break;
								case 8:
									this.color8 = status[i] == "0"?"green":"red";
									break;
								case 9:
									this.color9 = status[i] == "0"?"green":"red";
									break;
								case 10:
									this.color10 = status[i] == "0"?"green":"red";
									break;
								case 11:
									this.color11 = status[i] == "0"?"green":"red";
									break;
							}
						}
					}
				);
			}
		},
		created() {

			const { UpdateData } = this

			UpdateData()

			setInterval(this.UpdateData, 1000)

		}
	}
</script>

<style lang="less">
	#ranking-board {
		width: 100%;
    height: 60%;
		box-shadow: 0 0 3px blue;
		display: flex;
		flex-direction: column;
		background-color: rgba(6, 30, 93, 0.5);
		border-top: 2px solid rgba(1, 153, 209, .5);
		box-sizing: border-box;

		.ranking-board-title {
			font-weight: bold;
			height: 50px;
			display: flex;
			align-items: center;
			font-size: 20px;
		}

		.dv-scroll-ranking-board {
			flex: 1;
		}
	}
	.status{
		width: 18px;
		height: 18px;
		border-radius: 18px;
		float: left;
		margin-left:5rem;
	}
</style>
